
<template>
  <div class="mynavbar container">
    <div class="row">
      <div class="col-lg-6" style="background-color: #444444;">
        <router-link to="/content"><img :src="img" class="svg" /></router-link>
        <div class="searchbox">
          <img :src="searchImg" class="searchimg">
          <input type="text" class="myInput" />
          </div>
      </div>
      <div class="col-lg-6" style="background-color: #444444">
        <ul>
          <li v-for="(item, index) in navMsg" :key="index">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      navMsg: ["首页", "新手入门", "API", "关于", "注册", "登录"],
      img: require("@/assets/icons/cnodejs_logo.svg"),
      searchImg:require("@/assets/icons/search.svg")
    };
  },
};
</script>

<style scoped>
.mynavbar {
  width: 100%;
  min-width: 960px;
  max-width: 2000px;
}
.searchbox{
  display: inline-block;
  margin-top:10px;
  height:40px;
  position: relative;
}
.myInput {
  border: 0px;
  width: 220px;
  height: 28px;
  padding-left: 30px;
  border-radius: 32px;
  /* 取消外边框 */
  outline-style: none;
  background-color: rgb(136, 136, 136); 
}
.myInput:hover {
  transition: 1s;
  background-color: rgb(255, 255, 255);
}
.svg {
  width: 120px;
  height: 30px;
  margin: 0 20px;
}
.searchimg{
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px;
  left:5px
}
li {
  line-height: 50px;
  float: left;
  margin: 0 10px 0 10px;
  color: #c9c4c4;
  font-size: 13px;
  font-family: "微软雅黑";
  list-style: none;
}
</style>

